<!--开通登录-->
<template>
  <div class="login_wrap">
      <div class="login_content">
          <div class="user_head">
              <div class="head">
                <img  src="../../assets/icon/default_head.jpg" alt="">
              </div>
              <div class="tit">
                  <p class="sanjiao"></p>
                  <p>邀请你成为expressDemo会员，激动不</p>
              </div>
          </div>
          <div class="login">
              <div class="input_iphone">
                  <span><img src="../../assets/icon/icon-1.png" alt=""></span>
                 <input type="text" placeholder="请输入手机号" v-model="iphone">
              </div>
              <div class="yanzheng_code">
                  <span><img src="../../assets/icon/icon-2.png" alt=""></span>
                  <input type="text" placeholder="请输入密码" v-model="yzCode">
                  <!-- <b @click="getCode">{{countDown}}</b> -->
              </div>
              <div class="user_agree">
                  <span @click="agreeBtn" ref='agree_btn'><img src="../../assets/icon/agree.png" alt="" v-show='flag'></span>
                  <span @click="agreement">同意<b>《用户使用协议》</b></span>
              </div>
          </div>
          <div class="btn_sure">
              <button @click="loginBtn">确定</button>
          </div>
      </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { login } from "../../api/user.js";
export default {
  data() {
    return {
      openId: "",
      showDefaultImg: true,
      sharePlannerId: "",
      headUrl:
        "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%85%94%E5%AD%90%E5%A4%B4%E5%83%8F&hs=2&pn=1&spn=0&di=162588255060&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1284127531%2C1583912286&os=2217046040%2C2480358519&simid=0%2C0&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%85%94%E5%AD%90%E5%A4%B4%E5%83%8F&objurl=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201501%2F29%2F20150129181959_rXnBA.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3Dna9bdbldm&gsm=0&islist=&querylist=",
      lv: "",
      type: "",
      plannerId: "",
      isPhoneNum: false,
      iphone: "",
      yzCode: "",
      flag: true,
      countDown: "获取验证码"
    };
  },
  mounted() {
    //获取下分享人的plannerId,再掉个接口获取头像
    if (window.localStorage.sharePlannerId) {
      this.sharePlannerId = window.localStorage.sharePlannerId;
      this.getPlannerInfoById(this.sharePlannerId);
    }
    this.lv = this.$route.query.lv;
    this.openId = this.$route.query.openId;
    this.refId = this.$route.query.refId;
    this.type1 = this.$route.query.type1;
  },
  methods: {
    //验证是否是手机号格式
    testPhoneNum(str) {
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(str)) {
        this.isPhoneNum = false;
      } else {
        this.isPhoneNum = true;
      }
    },
    // 获取验证码
    async getCode() {
      this.testPhoneNum(this.iphone);
      if (this.isPhoneNum) {
        //60s倒计时
        this.countDown = "60";
        this.countDownTimer = setInterval(
          function() {
            this.countDown -= 1;
            if (this.countDown <= 0) {
              this.countDown = "获取验证码";
              clearInterval(this.countDownTimer);
            }
          }.bind(this),
          1000
        );
        //调接口
        try {
          const res = await this.axios.post(
            "/message/sms/getRandomCode.do?mobile=" + this.iphone
          );
          console.log(res);
          if (res.status === 200) {
            console.log("发送成功");
            Toast("发送成功");
          } else {
            this.countDown = "获取验证码";
            clearInterval(this.countDownTimer);
          }
        } catch (err) {
          console.error(err);
        }
      } else {
        //手机号格式不正确
        Toast("手机号格式不正确");
        console.log("手机号格式不正确");
      }
    },
    // 理财师登录
    async login(iphone, code) {
      try {
        const res = await login({
          username: iphone,
          password: code
        });
        // const res = await this.axios.post('/api/login',{
        //   username:iphone,
        //   password:code
        // })
        console.log(res);
        if (res.status === 200) {
          if (res.data.state === 1) {
            Toast("登录成功");
          } else {
            Toast("登录失败");
          }
        }
      } catch (err) {
        console.error(err);
      }
    },
    //确定登录按钮 判断是否填写手机号跟验证码
    loginBtn() {
      console.log(this.flag);
      this.testPhoneNum(this.iphone);
      if (!this.flag) {
        Toast("请确认用户协议");
      } else if (!this.isPhoneNum) {
        Toast("手机号格式不正确");
      } else if (!this.yzCode) {
        Toast("验证码不能为空");
      } else {
        this.login(this.iphone, this.yzCode);
      }
    },
    // 同意用户使用协议
    agreeBtn() {
      if (this.flag) {
        this.flag = !this.flag;
        this.$refs.agree_btn.style.border = "1px solid #999";
      } else {
        this.flag = !this.flag;
        this.$refs.agree_btn.style.border = 0;
      }
    },
    agreement() {
      this.$router.push("/agrement");
    }
  },
  beforeDestroy() {
    console.log("销毁定时器");
    clearInterval(this.countDownTimer);
  },
  destroyed() {}
};
</script>
<style scoped>
.login_wrap {
  width: 100%;
  height: 100%;
}
.login_wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.login_content {
  flex: 1;
  background: rgba(204, 204, 204, 0.171);
  height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}
.user_head {
  width: 100%;
  height: 3.11rem;
  background: url(../../assets/icon/user_bg.png) no-repeat center top;
  background-size: 100% 100%;
  position: relative;
}
.user_head .head {
  width: 13.1%;
  height: 0.98rem;
  background: mediumslateblue;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 20%;
  margin-left: -6.5%;
  overflow: hidden;
}
.user_head .head img {
  width: 100%;
  height: 0.98rem;
}
.tit {
  width: 100%;
  padding-top: 1.96rem;
  text-align: center;
  margin: 0 auto;
}
.tit > p:nth-child(2) {
  width: 75.7%;
  height: 0.82rem;
  background: rgba(0, 0, 0, 0.33);
  border-radius: 0.08rem;
  margin: 0 12.15%;
  font-size: 0.28rem;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  line-height: 0.82rem;
}
.user_head .sanjiao {
  width: 0;
  height: 0;
  border-left: 0.15rem solid transparent;
  border-right: 0.15rem solid transparent;
  border-bottom: 0.3rem solid rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 50%;
  margin-left: -0.15rem;
  top: 53.5%;
}
.login {
  width: 100%;
  text-align: center;
}
.input_iphone {
  padding-top: 1.43rem;
  margin-bottom: 0.5rem;
  position: relative;
}
.input_iphone span,
.yanzheng_code span {
  width: 0.33rem;
  height: 0.35rem;
  display: inline-block;
  position: absolute;
  left: 10%;
}
.input_iphone span {
  top: 53%;
}
.yanzheng_code span {
  top: 8%;
}
.input_iphone span > img,
.yanzheng_code span > img {
  width: 100%;
}
.yanzheng_code b {
  width: 20%;
  height: 0.35rem;
  display: inline-block;
  position: absolute;
  right: 15%;
  top: 57%;
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  color: #14aaf0;
  letter-spacing: 0;
}
.yanzheng_code {
  margin-bottom: 0.5rem;
  position: relative;
}
.input_iphone input,
.yanzheng_code input,
.btn_sure button {
  width: 77.3%;
  height: 0.88rem;
  border: 1px solid #d8d8d8;
  border-radius: 1rem;
  outline: none;
  margin: 0 6.3%;
}
.input_iphone input,
.yanzheng_code input {
  font-size: 0.28rem;
  color: #999999;
  letter-spacing: 0;
  padding-left: 0.8rem;
}
.btn_sure {
  width: 100%;
  text-align: center;
  padding-top: 1.5rem;
}
.btn_sure button {
  background: #14aaf0;
  border-radius: 0.99rem;
  border: 0;
  font-family: PingFangSC-Regular;
  font-size: 0.32rem;
  color: #ffffff;
  letter-spacing: 0.83px;
}
.user_agree {
  padding-left: 13%;
  height: 0.33rem;
  display: flex;
  align-content: center;
}
.user_agree span {
  display: inline-block;
  font-family: PingFangSC-Light;
  font-size: 0.24rem;
  color: #666666;
  letter-spacing: 0;
  text-align: left;
}
.user_agree > span:nth-child(1) {
  width: 0.34rem;
  height: 0.33rem;
  margin-right: 0.15rem;
  border-radius: 50%;
}
.user_agree > span:nth-child(1) > img {
  width: 0.33rem;
  height: 0.33rem;
}
.user_agree b {
  color: #14aaf0;
  font-size: 0.24rem;
}
</style>
